<template>
  <div class="box" :style="{ backgroundImage: 'url(' + url + ')' }">
    <div class="box_title">服务保障</div>
    <div class="box_content">
      <div
        class="content_item"
        v-for="(item, index) in content_Data"
        :key="index"
      >
        <div class="left_item_log">
          <img class="left_item_img" :src="item.img" alt="" />
        </div>
        <div class="left_item_title">{{ item.title }}</div>
        <div class="left_item_text">
          {{ item.text }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "header",
  props: {
    url: {
      type: String,
      default: function () {
        return "";
      },
    },
  },
  data() {
    return {
      content_Data: [
        {
          img: "https://www.diantangkeji.com:8084/static/20250511/5fa66fba0cdc4db3ad0faf5be0d14510.png",
          title: "全程1v1线上会议",
          text: "签署辅导协议后，全程1v1线上辅导，助教不定期巡课，查看辅导进度;",
        },
        {
          img: "https://www.diantangkeji.com:8084/static/20250511/e8bc0273d7aa4033885a5e3e038c47f9.png",
          title: "专属辅导群",
          text: "签署辅导协议后，辅导老师、学员和助教组成专属辅导群，在群里交流答疑;",
        },
        {
          img: "https://www.diantangkeji.com:8084/static/20250511/23ef4beedc3e4663ac066b3a7de96caf.png",
          title: "定制化服务",
          text: "每个学员根据自身需求和科研基础，制定定制化辅导服务;",
        },
        {
          img: "https://www.diantangkeji.com:8084/static/20250511/90e8a53f6ebb45c3b6a9c12afdc7d039.png",
          title: "签署辅导协议",
          text: "学员、辅导老师均签署正规辅导协议，保证各方权益和隐私，明确知识产权归属;",
        },
        {
          img: "https://www.diantangkeji.com:8084/static/20250511/3d9e6b1ea0e24cc7ba6563ca5d330ebd.png",
          title: "线下实体公司",
          text: "我们有线下实体公司，欢迎来公司参观交流，确认真实靠谱后再签辅导协议;",
        },
        {
          img: "https://www.diantangkeji.com:8084/static/20250511/e2b7be72a8314475989f29e8469ca804.png",
          title: "退款无忧",
          text: "在辅导过程中，如果确实因为一些原因导致辅导中断，学员和助教商量后，可以进行退款;",
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.box {
  margin: 0 auto;
  width: 1920px;
  height: 860px;
  /* 其他样式设置，比如背景尺寸、重复等 */
  background-size: cover; /* 让背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
  box-sizing: border-box;
  border: 1px solid #eff2f5;
  background-color: #f5f5f5;
}
.box_title {
  margin: 0 auto;
  text-align: center;
  margin: 73px 0 62px;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: bold;
  font-size: 40px;
  color: #1a1a1a;
}
.box_content {
  margin: 0 auto;
  width: 1300px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.content_item {
  margin: 18px 0px;
  width: 408px;
  height: 270px;
  background: #ffffff;
  border-radius: 6px;
  padding: 32px;
}
.left_item_log {
}
.left_item_img {
  width: 56px;
  height: 58px;
  margin-bottom: 18px;
}
.left_item_title {
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: bold;
  font-size: 28px;
  color: #2e2f34;
  margin-bottom: 10px;
}
.left_item_text {
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: 400;
  font-size: 20px;
  color: #333333;
}
</style>
